<!--
  Component Visibility Control Component

  This demo shows how to control the visibility of different CesiumJS components and entities.
  It demonstrates various techniques for showing/hiding elements in the 3D scene.

  Features:
    - Entity visibility control
    - Collection visibility control
    - Layer visibility control
    - Viewer widget visibility control
-->

<template>
  <div class="demo-container">
    <BaseCesiumViewer 
      ref="cesiumViewer" 
      :options="viewerOptions" 
      @viewer-ready="onViewerReady"
    />
    <div class="control-panel">
      <h3>Visibility Controls</h3>
      <div class="control-group">
        <h4>Entity Visibility</h4>
        <ControlItem
          type="checkbox"
          label="Point Entity"
          :value="pointEntityVisible"
          label-after
          @update:value="pointEntityVisible = $event"
          @change="updatePointEntityVisibility"
        />
        
        <ControlItem
          type="checkbox"
          label="Polygon Entity"
          :value="polygonEntityVisible"
          label-after
          @update:value="polygonEntityVisible = $event"
          @change="updatePolygonEntityVisibility"
        />
        
        <ControlItem
          type="checkbox"
          label="Billboard Entity"
          :value="billboardEntityVisible"
          label-after
          @update:value="billboardEntityVisible = $event"
          @change="updateBillboardEntityVisibility"
        />
      </div>
      
      <div class="control-group">
        <h4>Collection Visibility</h4>
        <ControlItem
          type="checkbox"
          label="All Entities"
          :value="allEntitiesVisible"
          label-after
          @update:value="allEntitiesVisible = $event"
          @change="updateAllEntitiesVisibility"
        />
      </div>
      
      <div class="control-group">
        <h4>Viewer Widget Visibility</h4>
        <ControlItem
          type="checkbox"
          label="Animation"
          :value="animationVisible"
          label-after
          @update:value="animationVisible = $event"
          @change="updateAnimationVisibility"
        />
        
        <ControlItem
          type="checkbox"
          label="Timeline"
          :value="timelineVisible"
          label-after
          @update:value="timelineVisible = $event"
          @change="updateTimelineVisibility"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import * as Cesium from 'cesium';
import BaseCesiumViewer from '../core/BaseCesiumViewer.vue';
import ControlItem from '../components/ControlItem.vue';

export default {
  name: 'ComponentVisibilityControl',
  components: {
    BaseCesiumViewer,
    ControlItem
  },
  setup() {
    // Reactive references for UI controls
    const pointEntityVisible = ref(true);
    const polygonEntityVisible = ref(true);
    const billboardEntityVisible = ref(true);
    const allEntitiesVisible = ref(true);
    const animationVisible = ref(true);
    const timelineVisible = ref(true);
    const viewerOptions = {
        terrainProvider: new Cesium.EllipsoidTerrainProvider(),
        animation: true,
        timeline: true
      };
    // References to Cesium entities
    let pointEntity, polygonEntity, billboardEntity, viewer;

    // This function is called when the Cesium viewer is ready
    const onViewerReady = (payload) => {
      // Check if payload and viewer are valid
      if (!payload || !payload.viewer) {
        console.error('Viewer is not ready or payload is invalid');
        return;
      }
      
      viewer = payload.viewer;
      const { Cesium } = payload;
      
      // Create sample entities
      pointEntity = viewer.entities.add({
        name: 'Point Entity',
        position: Cesium.Cartesian3.fromDegrees(-75.0, 40.0),
        point: {
          pixelSize: 10,
          color: Cesium.Color.RED
        },
        label: {
          text: 'Point Entity',
          font: '14px sans-serif',
          pixelOffset: new Cesium.Cartesian2(0, -20)
        }
      });

      polygonEntity = viewer.entities.add({
        name: 'Polygon Entity',
        polygon: {
          hierarchy: Cesium.Cartesian3.fromDegreesArray([
            -74.0, 41.0,
            -73.0, 41.0,
            -73.0, 40.0,
            -74.0, 40.0
          ]),
          material: Cesium.Color.BLUE.withAlpha(0.5)
        },
        label: {
          position: Cesium.Cartesian3.fromDegrees(-73.5, 40.5),
          text: 'Polygon Entity',
          font: '14px sans-serif',
          pixelOffset: new Cesium.Cartesian2(0, -20)
        }
      });

      billboardEntity = viewer.entities.add({
        name: 'Billboard Entity',
        position: Cesium.Cartesian3.fromDegrees(-76.0, 40.0),
        billboard: {
          image: '',
          scale: 0.5
        },
        label: {
          text: 'Billboard Entity',
          font: '14px sans-serif',
          pixelOffset: new Cesium.Cartesian2(0, -40)
        }
      });

      // Initially show all entities
      updateAllEntitiesVisibility();
    };

    // Update point entity visibility
    const updatePointEntityVisibility = () => {
      if (pointEntity) {
        pointEntity.show = pointEntityVisible.value;
      }
    };

    // Update polygon entity visibility
    const updatePolygonEntityVisibility = () => {
      if (polygonEntity) {
        polygonEntity.show = polygonEntityVisible.value;
      }
    };

    // Update billboard entity visibility
    const updateBillboardEntityVisibility = () => {
      if (billboardEntity) {
        billboardEntity.show = billboardEntityVisible.value;
      }
    };

    // Update all entities visibility
    const updateAllEntitiesVisibility = () => {
      updatePointEntityVisibility();
      updatePolygonEntityVisibility();
      updateBillboardEntityVisibility();
    };

    // Update animation widget visibility
    const updateAnimationVisibility = () => {
      if (viewer && viewer.animation) {
        viewer.animation.container.style.visibility = animationVisible.value ? 'visible' : 'hidden';
      }
    };

    // Update timeline widget visibility
    const updateTimelineVisibility = () => {
      if (viewer && viewer.timeline) {
        viewer.timeline.container.style.visibility = timelineVisible.value ? 'visible' : 'hidden';
      }
    };

    return {
      pointEntityVisible,
      polygonEntityVisible,
      billboardEntityVisible,
      allEntitiesVisible,
      animationVisible,
      timelineVisible,
      viewerOptions,
      onViewerReady,
      updatePointEntityVisibility,
      updatePolygonEntityVisibility,
      updateBillboardEntityVisibility,
      updateAllEntitiesVisibility,
      updateAnimationVisibility,
      updateTimelineVisibility
    };
  }
};
</script>

<style scoped>
.demo-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.control-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 300px;
  max-height: calc(100% - 40px);
  background: rgba(40, 40, 40, 0.8);
  color: white;
  padding: 15px;
  border-radius: 5px;
  overflow-y: auto;
  z-index: 100;
  backdrop-filter: blur(5px);
}

.control-group {
  margin-bottom: 20px;
}

.control-group h4 {
  margin-top: 0;
  margin-bottom: 10px;
  border-bottom: 1px solid #666;
  padding-bottom: 5px;
}
</style>